/* ============================================
   1. 亮色模式背景
   ============================================ */
body {
    background-image: url('/shengmingu2004/img/background-light.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    transition: background-image 0.5s ease;
}

/* ============================================
   2. 文章卡片样式（亮色）
   ============================================ */
* {
    background-color: transparent !important;
}

article,
.post,
.page,
.main,
section,
.content,
.home-profile .main,
.list .main,
.single .main {
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin: 16px auto !important;
    max-width: 820px !important;
    box-shadow: none !important;
}

/* ============================================
   3. 自动切换（仅亮色模式下生效）
   ============================================ */
body:not([data-theme="dark"]).day {
    background-image: url('/shengmingu2004/img/background-light.png') !important;
}
body:not([data-theme="dark"]).night {
    background-image: url('/shengmingu2004/img/background-dark.png') !important;
}

/* ============================================
   4. 暗黑模式（手动切换）
   ============================================ */
html[data-theme="dark"] body {
    background-image: url('/shengmingu2004/img/background-dark.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: #000000 !important;
}

html[data-theme="dark"] article,
html[data-theme="dark"] .post,
html[data-theme="dark"] .page,
html[data-theme="dark"] .main,
html[data-theme="dark"] section,
html[data-theme="dark"] .content,
html[data-theme="dark"] .home-profile .main,
html[data-theme="dark"] .list .main,
html[data-theme="dark"] .single .main {
    background: rgba(3, 3, 5, 0.9) !important;
}

/* ============================================
   5. 时钟样式
   ============================================ */
#clock {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    padding: 0 8px;
    color: #333;
    opacity: 0.75;
    text-align: center;
    line-height: var(--header-height);
    white-space: nowrap;
    letter-spacing: 0.5px;
    border-top: none;
    margin-top: 0;
}

html[data-theme="dark"] #clock {
    color: #ccc;
    border-top-color: rgba(255,255,255,0.05);
}

/* ============================================
   6. 夜间模式（body.night）下的卡片和时钟适配
   使用更高的优先级
   ============================================ */
body.night .main,
body.night article,
body.night .post,
body.night .page,
body.night section,
body.night .content,
body.night .home-profile .main,
body.night .list .main,
body.night .single .main {
    background: rgba(3, 3, 5, 0.9) !important;
    
}

body.night #clock {
    color: #ccc !important;
    border-top-color: rgba(255,255,255,0.05) !important;
}

/* ============================================
   7. 白天模式（body.day）下的卡片和时钟（保持亮色）
   ============================================ */
body.day .main,
body.day article,
body.day .post,
body.day .page,
body.day section,
body.day .content,
body.day .home-profile .main,
body.day .list .main,
body.day .single .main {
    background: rgba(255, 255, 255, 0.9) !important;
}

body.day #clock {
    color: #333 !important;
    border-top-color: rgba(0,0,0,0.05) !important;
}

/* ============================================
   8. 首页标题旁“回到文章站”小按钮
   ============================================ */
.profile h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile h1 .back-to-blog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.profile h1 .back-to-blog:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.profile h1 .back-to-blog svg {
    width: 18px;
    height: 18px;
}